<template>
  <div class="wrap">
    <div class="moudle-title">水 质 信 息</div>
    <div id="myChart"
         :style="{ width: '90%', height: '100%' }"></div>
  </div>
</template>
   
<script>
import { inject, onMounted } from 'vue'
export default {
  name: 'leftCenter',
  setup() {
    let echarts = inject('ec') //引入
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '10%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
          },
          // formatter: function (params) {
            // console.log(params,'params')
            // return (
              // params[0].name +
              // '<br/>' +
              // "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              // params[0].seriesName +
              // ' : ' +
              // Number(
              //   (params[0].value.toFixed(4) / 10000).toFixed(2)
              // ).toLocaleString() +
              // ' 万元<br/>'
            // )
          // },
        },
        backgroundColor: '',
        xAxis: {
          show: false,
          type: 'value',
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ['水质', 'PH', '浊度', 'TDS'],
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: '12',
              },
              formatter: function (value) {
                if (value >= 10000) {
                  return (value / 10000).toLocaleString() 
                } else {
                  return value.toLocaleString()
                }
              },
            },
            data: ['30℃', '7', '30FTU', '55PPM'],
          },
        ],
        series: [
          {
            name: '金额',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgb(57,89,255,1)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(46,200,207,1)',
                  },
                ]),
              },
            },
            barWidth: 20,
          data: [30, 7, 30, 55],
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: 'rgba(24,31,68,1)',
                barBorderRadius: 30,
              },
            },
          },
        ],
      })
      window.onresize = function () {
        //自适应大小
        myChart.resize()
      }
    })
  },
  components: {},
  mounted() {},
}
</script>
   
<style scoped lang='scss'>
.wrap {
  padding: 10px 0;
  width: 100%;
  height: 100%;
  .moudle-title {
    color: #50e9ff;
    font-size: 16px;
    text-align: center;
  }
  #myChart{
    margin: 0 auto;
  }
}
</style>